<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>说说</title>
		<link rel="stylesheet" href="css/weui.min.css">
		<style type="text/css">
			.container {
				position: absolute;
				top: 40px;
				right: 0;
				bottom: 0;
				left: 0;
			}
			
			.weui-article p {
				text-align: justify;
			}
			
			.comment {
				background-color: #eee;
			}
			
			.name {
				color: #576b95;
			}
			
			.icon-c {
				width: 20px;
			}
			
			.comment-con {
				padding: 0 15px;
				margin-bottom: 10px;
				font-size: 14px;
			}
			
			.r {
				border-bottom: 8px solid #eee;
				border-left: 8px solid transparent;
				border-right: 8px solid transparent;
				width: 1px;
				margin-top: 5px;
				margin-left: 10px;
			}
			
			.con {
				height: 50px;
			}
			
			.comment-btn {
				width: 80px;
				height: 40px;
				line-height: 40px;
				background-color: #3d4e56;
				margin-right: 5px;
				display: none;
				border-radius: 3px;
			}
			
			.comment_btn {
				display: flex;
			}
			
			.btn {
				flex: 1;
				text-align: center;
				color: #fff;
			}
			
			.submit {
				padding: 10px 15px;
			}
			
			.form {
				width: 100%;
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: 9999;
			}
			
			.weui-btn {
				width: 100%;
			}
			
			#iosDialog1 {
				display: none;
			}
			
			#iosDialog2 {
				display: none;
			}
			
			.mess {
				margin-bottom: 5px;
			}
			
			.mt0 {
				margin-top: 0;
			}
			
			.back {
				width: 30px;
				height: 25px;
			}
			
			.header_nav {
				background-color: #373b3e;
				width: 100%;
				position: fixed;
				top: 0;
				left: 0;
				z-index: 999;
			}
		</style>
	</head>

	<body>
		<div class="weui-cells mt0 header_nav">
			<div class="weui-cell">
				<div class="weui-cell__hd">
					<div class="back">
						<img src="images/left.png" alt="">
					</div>
				</div>
				<div class="weui-cell__bd"></div>
				<div class="weui-cell__ft">
				</div>
			</div>
		</div>
		<div class="container">

			<div class="page__bd">
				<article class="weui-article">
					<section class="section-container">
					</section>
				</article>

				<div class="weui-cell con">
				</div>
				<div class="comment-con">
				</div>
			</div>

			<div class="js_dialog" id="iosDialog1">
				<div class="weui-mask"></div>
				<div class="weui-dialog">
					<div class="weui-dialog__hd"><strong class="weui-dialog__title">评论</strong></div>
					<div class="weui-dialog__bd">
						<textarea class="weui-textarea" id="message1" placeholder="请输入评论" rows="3"></textarea>
					</div>
					<div class="weui-dialog__ft">
						<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default" id="cancal1">取消</a>
						<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" id="submit1">评论</a>
					</div>
				</div>
			</div>

		</div>
	</body>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="js/Url.js"></script>
	<script type="text/javascript">
		//	var baseUrl = 'http:192.168.0.129:8080/';
		// 获取文章ID
		function getQueryString(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			var r = window.location.search.substr(1).match(reg);
			if(r != null)
				return unescape(r[2]);
			return "";
		}
		var id = getQueryString("id");

		// 时间戳转换
		function getLocalTime(nS) {
			return new Date(parseInt(nS)).toLocaleString();
		}
		$('.back').on('click', function() {
			window.history.go(-1);
		})
		// 加载数据
		function laodData() {
			// 加载文章详情
			$.ajax({
				url: baseUrl + 'foot/user/getFbUserMoodById',
				type: 'GET',
				dataType: 'json',
				data: {
					'id': id
				},
				success: function(res) {
					console.log(res);
					var str = '';
					str += '<section>';
					str += '<p>' + res.data.conntent + '</p>';
					str += '<p>';
					for(var i = 0; i < res.data.imgUrlValue.length; i++) {
						str += '<img style="width:100%;" src="' + baseUrl + res.data.imgUrlValue[i].imgPath + '" alt="">';
					}
					str += '</p>';
					str += '</section>';
					$('.section-container').append(str);

					var str1 = '<div class="weui-cell__bd">';
					str1 += '<p style="font-size:12px;">' + getLocalTime(res.data.createTime) + '</p>';
					str1 += '</div>';
					str1 += '<div class="weui-cell__ft">	';
					str1 += '<img class="icon-c" src="images/c.png" alt="">';
					str1 += '</div>';
					$('.con').append(str1);

					$('.icon-c').click(function() {
						$('#iosDialog1').show();
					})
				}
			})
			// 请求评论数据
			$.ajax({
				url: baseUrl + 'foot/user/selectCommentsByMoodId',
				type: 'POST',
				dataType: 'json',
				data: {
					'moodId': id
				},
				success: function(res) {
					console.log(res);
					var str2 = '';
					str2 += '<div class="r"></div>';
					str2 += '<div class="comment">';
					str2 += '<div class="mess_item">';
					for(var i = 0; i < res.data.length; i++) {
						str2 += '<p class="mess" data-id="1"><span class="name">' + res.data[i].userName + '</span>:<span>' + res.data[i].content + '</span></p>';
					}
					str2 += '</div>';
					str2 += '</div>';
					$('.comment-con').append(str2);
				}
			})

		}

		laodData();

		$('#cancal1').click(function() {
			$('#iosDialog1').hide();
			$("#message1").val("");
		})

		// 提交评论
		$('#submit1').click(function() {
			var mess = $('#message1').val();
			if(mess == '') {
				alert('请输入评论内容');
			} else {
				var str = '<div class="mess_item"><p class="mess" data-id="222"><span class="name1">username</span>:<span>' + mess + '</span></p></div>';
				$('.comment').append(str);
				$("#message1").val("");
				$('#iosDialog1').hide();
				$.ajax({
					url: baseUrl + 'foot/user/saveComment',
					type: 'POST',
					dataType: 'json',
					data: {
						'moodId': id,
						'content': mess
					},
					success: function(res) {
						console.log(res);
					}

				})
			}
		})
	</script>

</html>